<template>
  <div class="user-select-test">
    <h2>用户选择组件优化测试</h2>

    <!-- 测试1: 传入用户ID数组 -->
    <div class="test-section">
      <h3>测试1: 传入用户ID数组</h3>
      <user-dialog-select v-model="selectedUserIds" :multiple="true" placeholder="请选择用户（传入ID）" />
      <p>已选用户ID: {{ selectedUserIds }}</p>
    </div>

    <!-- 测试2: 传入用户对象数组 -->
    <div class="test-section">
      <h3>测试2: 传入用户对象数组</h3>
      <user-dialog-select v-model="selectedUserObjects" :multiple="true" placeholder="请选择用户（传入对象）" />
      <p>已选用户对象: {{ selectedUserObjects }}</p>
    </div>

    <!-- 测试3: 单选模式 -->
    <div class="test-section">
      <h3>测试3: 单选模式</h3>
      <!-- 修复：单选模式下仍然使用multiple=false，但v-model绑定数组 -->
      <user-dialog-select v-model="singleUserId" :multiple="false" placeholder="请选择单个用户" />
      <p>已选用户ID: {{ singleUserId }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import userDialogSelect from "@/components/SelectFilter/user-dialog-select.vue";
import apiService from "@/api/services/apiService";

// 测试1: 传入用户ID数组
const selectedUserIds = ref<string[]>([]);

// 测试2: 传入用户对象数组
const selectedUserObjects = ref<any[]>([]);

// 测试3: 单选模式 (修复版本)
const singleUserId = ref<string[]>([]);

// 设置默认选中
onMounted(async () => {
  try {
    // 获取用户数据用于测试
    const userResponse = await apiService.find("users", {});
    const users: any[] = Array.isArray(userResponse.data) ? userResponse.data : [];

    if (users.length > 0) {
      // 设置一些默认选中的用户
      selectedUserIds.value = [users[0]._id, users[1]?._id].filter(Boolean);
      selectedUserObjects.value = [users[0], users[1]].filter(Boolean);
      // 修复单选模式的赋值
      singleUserId.value = [users[0]._id];
    }
  } catch (error) {
    console.error("获取测试数据失败:", error);
  }
});
</script>

<style scoped>
.user-select-test {
  padding: 20px;
}
.test-section {
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #eeeeee;
  border-radius: 8px;
}
.test-section h3 {
  margin-top: 0;
}
.test-section p {
  padding: 10px;
  font-family: monospace;
  background-color: #f5f5f5;
  border-radius: 4px;
}
</style>
